<template>
    <div class="container">
        <!--<img src="../../assets/images/lawyer_bg.jpg" alt="图片" class="img-bg">-->
        <div class="title">
            <span class="weather">瑞安 {{ weatherCurrentDay.weather }}  {{ weatherCurrentDay.temperature.split('/')[0] }}℃～{{ weatherCurrentDay.temperature.split('/')[1] }}</span>
            <span class="company">浙江安瑞律师事务所</span>
            <span class="date">{{ getDate }}  {{ getWeek }}  {{ time }}</span>
        </div>
        <!--<div class="duty">
            <span style="margin-right: 28px;">值班主任</span>
            <span>值班律师</span>
        </div>-->
        <div class="ove">
            <ul class="lawyer-con">
                <li v-for="(item, index) in watchList" :key="index" class="item" @click="showDetail(index)">
                    <img :src="item.avatar_big" alt="">
                    <span class="name">{{ item.nickname }}</span>
                    <div class="lv">
                        <span v-if="item.director_status == 1">值班主任</span>
                        <span v-if="item.lawyer_status == 1">值班律师</span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-show="maskShow" class="mask" />
        <div v-show="maskShow" class="detail">
            <img src="../../assets/images/arrow_left.png" alt="" class="arrow-left" @click="prev">
            <img src="../../assets/images/arrow_right.png" alt="" class="arrow-right" @click="next">
            <img src="../../assets/images/arrow_close.png" alt="" class="arrow-close" @click="close">
            <el-carousel ref="carousel" height="883px" :interval="5000" :autoplay="false" arrow="never" indicator-position="none" :initial-index="carouselIndex">
                <el-carousel-item v-for="(item, index) in watchList" :key="index" style="width: 1140px;" name="index" @click="setActiveItem(index)">
                    <div class="content">
                        <img :src="watchList[carouselIndex].avatar_big" alt="" class="image">
                        <div class="info">
                            <div>
                                <span style="font-size: 50px; font-weight: 800; letter-spacing: 5px;">{{ watchList[carouselIndex].nickname }}</span>
                                <span style="font-size: 30px; padding-left: 30px; letter-spacing: 5px;">{{ watchList[carouselIndex].job_title }}</span>
                            </div>
                            <div style="margin: 26px 0;">
                                <div style="font-size: 26px;">个人简介：</div>
                                <div style="font-size: 26px; height: 400px; overflow-y: auto;">{{ watchList[carouselIndex].introduction }}</div>
                            </div>
                            <div style="font-size: 26px;" />
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
const check_week = dateStr => {
    let weekArray = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    let week = weekArray[new Date(dateStr).getDay()]
    console.log(week)
    return week
}
const msToDate = msec => {
    let datetime = new Date(msec)
    let year = datetime.getFullYear()
    let month = datetime.getMonth()
    let date = datetime.getDate()
    let hour = datetime.getHours()
    let minute = datetime.getMinutes()
    let second = datetime.getSeconds()
    let result1 = year + '/' + ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) + '/' + ((date) < 10 ? '0' + date : date) + ' ' + ((hour) < 10 ? '0' + hour : hour) + ':' + ((minute) < 10 ? '0' + minute : minute) + ':' + ((second) < 10 ? '0' + second : second)
    let result2 = year + '年' + ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) + '月' + ((date) < 10 ? '0' + date : date) + '日'
    let result3 = year + '-' + ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) + '-' + ((date) < 10 ? '0' + date : date)
    return {
        hasTime: result1,
        withoutTime: result2,
        week: result3
    }
}
import { getWatchList, simpleWeather } from '@/api/lawyerListApi'
export default {
    name: 'LawyerList',
    data() {
        return {
            date: '',
            week: '',
            time: this.getTime(),
            maskShow: false,
            carouselIndex: 0,
            watchList: [],
            weatherCurrentDay: {weather: '', temperature: ''}
        }
    },
    computed: {
        getDate() {
            return msToDate(new Date()).withoutTime
        },
        getWeek() {
            return check_week(msToDate(new Date()).week)
        }
    },
    created() {
        this._getWatchList()
        this._simpleWeather()
    },
    methods: {
        async _simpleWeather() {
            const res = await simpleWeather({city: '瑞安'})
            console.log(res)
            this.weatherCurrentDay = res.data.result.future[0]
        },
        async _getWatchList() {
            const res = await getWatchList({length: 999})
            console.log(res)
            this.watchList = res.data.list.filter(item => item.avatar_big)
            // this.watchList = res.data.list
        },
        getTime() {
            setInterval(() => {
                let hour = msToDate(new Date()).hasTime.split(' ')[1].split(':')[0]
                let minute = msToDate(new Date()).hasTime.split(' ')[1].split(':')[1]
                this.time = hour + ':' + minute
            }, 1000)
        },
        showDetail(index) {
            console.log(index)
            this.maskShow = true
            this.carouselIndex = index
        },
        close() {
            this.maskShow = false
            this.carouselIndex = 0
        },
        prev() {
            this.carouselIndex--
            if (this.carouselIndex < 0) {
                this.carouselIndex = this.watchList.length - 1
            }
            console.log(this.carouselIndex)
            this.setActiveItem(this.carouselIndex)
        },
        next() {
            this.carouselIndex++
            if (this.carouselIndex > this.watchList.length - 1) {
                this.carouselIndex = 0
            }
            console.log(this.carouselIndex)
            this.setActiveItem(this.carouselIndex)
        },
        setActiveItem(index) {
            this.$refs.carousel.setActiveItem(index)
        }
    }
}
</script>

<style scoped lang="scss">
    .mask {
        position: fixed;
        background: #000;
        opacity: 0.4;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transition: all 0.5s ease;
    }
    .container {
        color: #fff;
        position: relative;
        background: url("../../assets/images/lawyer_bg.jpg") no-repeat fixed;
        background-size: 100% 100%;
        height: 100vh;
        .img-bg {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .title {
            position: relative;
            height: 10vh;
            .weather,
            .date {
                font-size: 1.04rem;
                color: #c7ddfb;
                display: inline-block;
            }
            .weather {
                position: fixed;
                left: 3rem;
                top: 1rem;
                z-index: 999;
            }
            .date {
                position: fixed;
                right: 3rem;
                top: 1rem;
                z-index: 999;
            }
            .company {
                font-weight: 800;
                font-size: 2.1rem;
                letter-spacing: 0.11rem;
                color: #fff;
                position: fixed;
                z-index: 999;
                left: 50%;
                top: 1rem;
                transform: translate(-50%, 0);
            }
        }
        .duty {
            position: relative;
            padding: 120px 46px 20px;
            span {
                display: inline-block;
                width: 101px;
                height: 30px;
                line-height: 30px;
                background-color: #cfa972;
                border-radius: 15px;
                font-size: 18px;
                letter-spacing: 1px;
                color: #032259;
                text-align: center;
            }
        }
        .ove {
            /* height: 1232px; */
            height: 88vh;
            overflow: hidden;
            position: absolute;
            top: 12vh;
        }
        .lawyer-con {
            list-style: none;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            padding: 44px 46px 20px;
            width: 100%;
            overflow-y: auto;
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 28px;
                margin-bottom: 65px;
                cursor: pointer;
                position: relative;
                height: 172px;
                img {
                    width: 101px;
                    height: 135px;
                }
                .name {
                    color: #fff;
                    padding-top: 15px;
                    font-size: 20px;
                    letter-spacing: 1px;
                }
                .lv {
                    width: 101px;
                    height: 30px;
                    span {
                        display: inline-block;
                        width: 101px;
                        height: 30px;
                        line-height: 30px;
                        background-color: #cfa972;
                        border-radius: 15px;
                        font-size: 18px;
                        letter-spacing: 1px;
                        color: #032259;
                        text-align: center;
                        position: absolute;
                        top: -24%;
                        left: 50%;
                        transform: translate(-50%, 0);
                    }
                }
            }
        }
        .detail {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            width: 1140px;
            height: 883px;
            background: url("../../assets/images/dialog_bg.png") no-repeat;
            background-size: 100%;
            .arrow-left {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(-120%, -50%);
                cursor: pointer;
                width: 80px;
                height: 115px;
            }
            .arrow-right {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translate(120%, -50%);
                cursor: pointer;
                width: 80px;
                height: 115px;
            }
            .arrow-close {
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(-10%, 50%);
                cursor: pointer;
                z-index: 998;
                width: 47px;
                height: 38px;
            }
            .content {
                display: flex;
                height: 883px;
                padding: 0 100px;
                .image {
                    width: 432px;
                    height: 575px;
                    margin-right: 100px;
                    align-self: center;
                }
                .info {
                    /* width: 708px; */
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }
        }
    }
</style>
